<template>
	<div class="wrapper">
				
		<!-- 顶部应用栏 -->
		<header class="mdc-top-app-bar">
			<div class="mdc-top-app-bar__row">
				<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
					<BackButton />
					<h1 class="mdc-top-app-bar__title">编辑</h1>
				</section>
			</div>
		</header>
		<!-- 商家logo部分 -->
		<div class="business-logo">
		<img :src="getImg(foodImg)" alt="食品图片" @error="handleImageError" />
			</div>

		<!-- 编辑表单部分 -->
		<div class="food-edit-form">
		<label for="foodName">商品名称</label>
		<input type="text" v-model="foodName" placeholder="输入食品名称" />

		<label for="foodPrice">商品价格</label>
		<input type="number" v-model="foodPrice" placeholder="输入食品价格" />

		<label for="foodExplain">商品描述</label>
		<textarea v-model="foodExplain" placeholder="输入食品描述"></textarea>

		<label for="foodImg">商品图片</label>
		<input type="file" @change="onFileChange" accept="image/*" />

			<button @click="submitEdit">提交修改</button>
		</div>
	</div>
</template>

<script>
	import BackButton from '../components/BackButton.vue';
	export default{
		name:'FoodChange',
		data(){
			return {
				businessId:'',
				foodId: this.$route.query.foodId,
				foodImg:'',
				foodExplain:'',
				foodPrice:0.0,
				foodName:'',
				remarks:''
			}
		},
		
		created() {
			this.$axios.post('FoodController/business/food/'+this.foodId,this.$qs.stringify({
				
			})).then(response=>{
				
				if(response.data.code=='200'){
					let re=response.data.result;
					this.foodImg=re.foodImg;
					this.foodExplain=re.foodExplain;
					this.foodPrice=re.foodPrice;
					this.foodName=re.foodName;
					this.remarks=re.remarks;
					this.businessId=re.businessId;
				}
			}).catch(error=>{
				console.error(error);
			});
		},
		components:{
			BackButton
		},
		methods:{
		getImg(path){
			if(!path) return this.getDefaultImage();
			// 如果是完整的HTTP URL，直接返回
			if(path.startsWith('http')) return path;
			// 如果是 base64 格式，直接返回
			if(path.startsWith('data:image')) return path;
			// 如果是相对路径（以/开头），拼接服务器地址
			if(path.startsWith('/')) {
				// 如果已经是 /img/ 开头，直接拼接
				if(path.startsWith('/img/')) {
					return 'http://localhost:8888' + path;
				}
				// 如果是其他路径（如 /2024-10-26/xxx.jpg），需要添加 /img 前缀
				return 'http://localhost:8888/img' + path;
			}
			// 其他情况，添加服务器前缀和路径分隔符
			return 'http://localhost:8888/img/' + path;
		},
		getDefaultImage(){
			// 返回一个包含食物emoji的SVG图片
			const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><rect width="200" height="200" fill="#f5f5f5" rx="10"/><text x="100" y="100" font-size="80" text-anchor="middle" dominant-baseline="central">🍽️</text></svg>';
			return 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg)));
		},
		handleImageError(event){
			event.target.src = this.getDefaultImage();
		},
		onFileChange(event) {
			// 当用户选择文件时，将文件存储到 selectedFile 中
			this.selectedFile = event.target.files[0];
			this.uploadImage(); // 调用上传函数
		},
		uploadImage() {
			let formData = new FormData();
			formData.append('file', this.selectedFile); // 将选中的文件附加到表单数据中

			// 使用 axios 上传图片到服务器
				this.$axios.post('FileController/user/img', formData, {
					headers: {
						'Content-Type': 'multipart/form-data'
					}
				})
			.then(response => {
				if (response.data.code === '200') {
					this.foodImg = response.data.result; // 从服务器获取图片的访问路径
				} else {
					alert('图片上传失败');
				}
			})
			.catch(error => {
				console.error('图片上传错误', error);
			});
			},
			submitEdit() {
				// 提交修改后的商品信息
				this.$axios.post('FoodController/updateFoodById', this.$qs.stringify({
					foodName: this.foodName,
					foodPrice: this.foodPrice,
					foodExplain: this.foodExplain,
					foodImg: this.foodImg,
					businessId: this.businessId,
					remarks : this.remarks,
					foodId : this.foodId
				}))
				.then(response => {
					if (response.data.code === '200') {
						alert('商品信息更新成功');
						this.$router.go(-1);
					} else {
						alert('更新失败');
					}
			})
			.catch(error => {
				console.error('提交错误', error);
			});
		}
		},
	}
</script>

<style scoped>
	.wrapper {
		min-height: 150vh;
		display: flex;
		flex-direction: column;
	}

	/* 顶部应用栏 */
	.mdc-top-app-bar {
		background-color: #1976D2;
		color: white;
		position: sticky;
		top: 0;
		z-index: 100;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}

	.mdc-top-app-bar__row {
		display: flex;
		align-items: center;
		height: 72px;
		padding: 0 20px;
	}

	.mdc-top-app-bar__section {
		display: flex;
		align-items: center;
		gap: 16px;
		flex-direction: row;
	}

	.mdc-top-app-bar__title {
		font-size: 22px;
		font-weight: 500;
		margin: 0;
		white-space: nowrap;
		line-height: 1;
	}

	.business-logo {
		width: 100%;
		height: 35vw;
		margin-top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.business-logo img {
		width: 40vw;
		height: 30vw;
		border-radius: 5px;
		}

	/****************** 编辑表单部分 ******************/
	.food-edit-form {
		margin: 15vw 5vw;
		display: flex;
		flex-direction: column;
	}

	.food-edit-form label {
		font-size: 4vw;
		margin-bottom: 2vw;
	}

	.food-edit-form input,
	.food-edit-form textarea {
		width: 100%;
		padding: 3vw;
		font-size: 4vw;
		margin-bottom: 5vw;
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	.food-edit-form button {
		padding: 3vw;
		background-color: #0097ff;
		color: white;
		border: none;
		font-size: 4vw;
		border-radius: 10px;
		cursor: pointer;
	}
</style>
